<template>
	<view>
		<view class="vip-bg">
			<view class="vip-top">
				<view class="flex a-c">
					<view class="">
						<u-avatar size="90" :src="src" class="left"></u-avatar>
					</view>
					<view class="m-l-2">
						<view class="">
							<text class="vip-user-name">{{userName}}</text>
							<text style="color: #E84429;" v-if="userMobile">({{userMobile}})</text>
						</view>
						<view class="flex a-c">
							<text class="vip_nikename-time">{{vipType}}</text>
							<text class="vip_nikename-time">{{my_name}}</text>
						</view>
					</view>
				</view>
				<view class="flex a-c j-c vip-name-ri" @click="popShow=true">
					<text>切换账号</text>
				</view>
			</view>
			<view class="flex j-b" style="padding: 20rpx 0rpx 20rpx 20rpx;">
				<image class="vip-bg-1-l" src="../../static/vip/pt.png" mode=""></image>
				<view class="vip-bg-1-r">
				</view>
			</view>
		</view>
		<u-modal v-model="popShow" :show-cancel-button="true" :mask-close-able="true" content="确定要退出当前账号吗？"
			@confirm="$utils.navigateTo('/login/phone-login')"></u-modal>
		<view class="" style="margin-top: -90px;">
			<view class="vip-but">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;padding: 10rpx;">
					<view @click="on_tab_vip(index,item.name)" :class="bannerIndex==index ?'tab_name_s':'tab_name' "
						v-for="(item,index) in vipDataList" :key="index">
						<image v-if="bannerIndex==index" style="width: 40rpx;height: 40rpx;"
							src="../../static/vip/icon_tab.png" mode=""></image>
						<text class="bm-ml1">{{item.name}}</text>
					</view>

				</view>
				<view class="" style="padding: 20rpx 10rpx;">
					<view class="" style="font-size: 32rpx;font-weight: 800;color: #000;">
						{{vip_name}}权益
					</view>
				</view>
				<view class="" style="background-image: url('../../static/vip/q_bg.png'); background-size:100% 100%; 
				border-radius: 25rpx;">
					<view class="flex " style="padding: 20rpx 20rpx 0rpx 0rpx;justify-content: flex-end;
				   color: #B58443;
				   font-weight: 800;font-size: 30rpx;">
						<text>{{vip_name_sub}}</text>
					</view>
					<view class="" style="padding: 20rpx 20rpx 20rpx 20rpx;">
						<view class="vip-qy-list-t">
							<view class="vip-q-list">
								<view class="" style="flex: 0 0 22%;margin: 1.5%;"
									v-for="(item,index) in vipInfoList_a">
									<view class="t-c">
										<image style="width: 60rpx;height: 60rpx;" :src="item.img" mode=""></image>
										<view class="" style="color: #784800;font-size: 22rpx;padding-top: 20rpx;">
											{{item.name}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>

			</view>
			<view class="" style="padding: 20rpx;">
				<view class="" style="font-size: 32rpx;font-weight: 800;color: #000;padding: 0rpx 10rpx;">
					{{vip_name}}套餐
				</view>
			</view>
			<view class="vip-tc">
				<view :class="priceListIndex==index?'vip-tc-list-s' :'vip-tc-list'" style="position: relative;"
					v-for="(item,index) in priceList" :key="index" @click="on_priceList(index)">
					<view class="vip-tc-list-bt">
						<view class="flex j-c a-c vip-tc-list-th">
							<text style="margin-right: 10rpx;">{{index==0?'限时特惠':index==1?'限时7折':'限时5折' }} </text>
						</view>
					</view>
					<view class="" style="height: 50rpx;">

					</view>
					<text style="vip-tc-text">{{item.name}}</text>
					<view class="vip-tc-view">
						<text style="font-size: 40rpx;">￥</text> {{item.price}}
					</view>
					<view class="grey txt">{{priceFilter(item)}}</view>

				</view>

			</view>

		</view>
		<template v-if="appleShow">
			<view class="" style="padding: 20rpx;">


				<view style="font-size: 32rpx;font-weight: 800;color: #000;">支付方式</view>
				<view class="main" style="padding-top: 20rpx;">
					<view class="page-card">
						<u-cell-item :class="type==1?'vip-pay-s' :'vip-pay'" title="微信" :arrow="false" @click="type=1">
							<u-icon slot="icon" size="65" name="weixin-circle-fill" color="#2ab047"
								style="margin-right:20rpx"></u-icon>
							<u-icon slot="right-icon" size="38" name="checkmark-circle-fill"
								:color="type==1?'#eeb115':'#ddd'"></u-icon>
						</u-cell-item>
						<view class="" style="height: 20rpx;">

						</view>
						<u-cell-item title="支付宝" :class="type==2?'vip-pay-s' :'vip-pay'" :arrow="false" @click="type=2">
							<u-icon slot="icon" size="65" name="zhifubao-circle-fill" color="#1362ff"
								style="margin-right:20rpx"></u-icon>
							<u-icon slot="right-icon" size="38" name="checkmark-circle-fill"
								:color="type==2?'#eeb115':'#ddd'"></u-icon>
						</u-cell-item>
						<view class="" style="height: 20rpx;">

						</view>
						<u-cell-item :class="type==3?'vip-pay-s' :'vip-pay'" :title="'余额支付（'+maxMoney+'元）'"
							:arrow="false" @click="type=3">
							<u-icon slot="icon" size="65" name="rmb-circle-fill" color="#eeb115"
								style="margin-right:20rpx"></u-icon>
							<u-icon slot="right-icon" size="38" name="checkmark-circle-fill"
								:color="type==3?'#eeb115':'#ddd'"></u-icon>
						</u-cell-item>
					</view>
				</view>
			</view>
		</template>
		<view class="" style="height: 160px;">

		</view>
		<view class="t-c" style="position: fixed;bottom: 0px;z-index: 88;background-color: #fff;width: 750rpx;
		height: 90px;">
			<view class="" style="padding: 10px;">
				<view @click="btnSubmit" class="flex j-c a-c" style="width: 100%;height: 80rpx;
				background-color: #D82E1F;border-radius: 55rpx;color: #fff;font-size: 30rpx;">
					<text>￥{{pay_money}}</text>
					<text style="margin-left: 40rpx;">立即支付</text>
				</view>
				<view @click="$utils.navigateTo('/agreement/agreement',{id:49})" class="flex j-c"
					style="padding-top: 20rpx;">
					<text>开通会员请阅读《会员协议》</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	let iapChannel = null,
		productId = 'card38',
		productIds = ['card88', 'card288', 'card38', 'card228', 'card468', 'card98', 'card168', 'card358', 'card68'];
	import mixin from "@/libs/mixin.js";
	import {
		getCardData,
		getCardinfoData,
		getCardinfo,
		Gopay,
		sendPayClue,
	} from '@/api/index.js'
	import {
		getWalletInfo
	} from '@/api/wallet.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				src: '',
				appleShow: true,
				userName: '用户中心',
				userMobile: '',
				vipType: '非会员',
				expirationTimeTxt: '',
				popShow: false,
				bannerIndex: 0,
				priceListIndex: 0,
				pay_money: 0,
				vipDataList: [],
				vipInfoList_a: [],
				vip_name_sub: '开启五大权限',
				vipInfoList: [{
						name: "会员标识",
						icon: "level",
						img: '../../static/vip/icon_.png',
						type: '1'
					},
					{
						name: "专属客服",
						icon: "chat",
						img: '../../static/vip/icon_1.png',
						type: '1'
					},
					{
						name: "电话",
						icon: "server-man",
						img: '../../static/vip/icon_2.png',
						type: '1'
					},
					{
						name: "个人名称",
						icon: "photo",
						img: '../../static/vip/icon_13.png',
						type: '1'
					},
					{
						name: "公司名称",
						icon: "home",
						img: '../../static/vip/icon_3.png',
						type: '1'
					},
					{
						name: "官网",
						icon: "attach",
						img: '../../static/vip/icon_6.png',
						type: '2'
					},
					{
						name: "二维码",
						icon: "attach",
						img: '../../static/vip/3.png',
						type: '3'
					},
					{
						name: "签名",
						icon: "edit-pen",
						img: '../../static/vip/icon_4.png',
						type: '2'
					},
					{
						name: "地址",
						icon: "grid",
						img: '../../static/vip/1.png',
						type: '2'
					}, {
						name: "私有数据",
						icon: "edit-pen",
						img: '../../static/vip/icon_4.png',
						type: '1'
					}, {
						name: "品牌图标",
						icon: "edit-pen",
						img: '../../static/vip/2.png',
						type: '1'
					}, {
						name: "历史报价",
						icon: "edit-pen",
						img: '../../static/vip/icon_4.png',
						type: '3'
					},
				],
				title: '',
				content: '',
				priceList: [],
				vip_name: '普通会员',
				my_name: '',
				type: 1,
				maxMoney: "0.00"
			}

		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					if (res.platform == "ios" || res.platform == "mac") {
						this.appleShow = false;
						this.type = 4;
					}
				}
			});
			var that = this;

			this.getCardData();
			this.getprice(0);
			this.bannerChange(0);
			// #ifdef APP
			plus.payment.getChannels((channels) => {
				for (var i in channels) {
					var channel = channels[i];
					if (channel.id === 'appleiap') {
						iapChannel = channel;
						that.requestOrder();
					}
				}
			}, function(e) {
				console.log("获取iap支付通道失败：" + e.message);
			});
			// #endif

		},
		methods: {
			requestOrder() {
				iapChannel.requestOrder(productIds, (orderList) => {
					this.disabled = false;
					uni.hideLoading();
				}, (e) => {
					uni.hideLoading();

				});
			},
			// 提交
			btnSubmit() {
				var that = this;
				//如果没有登录  跳转
				if (!this.$store.state.app.token) {
					this.$utils.redirectTo('/pages/login/login', {
						title: "登录",
						subTitle: "请先登录",
						btnValue: "请先登录",
						url: '/login/login'
					});
				} else {
					console.log("this.type: " + JSON.stringify(this.type));
				 
					uni.request({
						url: 'http://www.txzh.com.cn/api.php?app=Default&act=buycard',
						method: 'POST',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'X-Requested-With': 'xmlhttprequest'
						},
						data: {
							type: this.bannerIndex,
							price: this.priceListIndex,
							money: this.pay_money,
							token: this.$store.state.app.token,
							paytype: this.type
						},
						success: res => {
							if (this.type == 3) {
								//余额支付
								if (this.pay_money > this.maxMoney) {
									uni.showToast({
										title: '余额不足，请选择其他支付方式！',
										icon: 'none'
									});
									return false;
								};
								uni.request({
									url: 'http://www.txzh.com.cn/api.php?app=Default&act=paymoney',
									method: 'POST',
									header: {
										'Content-Type': 'application/x-www-form-urlencoded',
										'X-Requested-With': 'xmlhttprequest'
									},
									data: {
										ordersn: res.data.list.ordersn
									},
									success: res => {
										if (res.data.list.err == 1) {
											uni.showModal({
												content: res.data.list.msg,
												showCancel: false
											})
										} else {
											sendPayClue();
											that.getCardData();
											this.$utils.redirectTo('/common/success', {
												title: "支付成功！",
												subTitle: "赶快体验会员特权吧！",
												btnValue: "返回首页",
												url: '/index/index'
											});
										}
									},
									fail: () => {},
									complete: () => {}
								});
							} else if (this.type == 4) {
								//苹果支付
								uni.showLoading({
									title: '支付中...',
									mask: true
								})
								that.applePay('card' + that.pay_money, res.data.list.ordersn);
							} else {

								that.pay(res.data.list.ordersn)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},

			pay(ordersn) {
				var that = this;
				Gopay({
					token: this.$store.state.app.token,
					ordersn: ordersn,
					paytype: 'vip',
				}).then(res => {
					if (res.list.err == 0) {
						uni.showToast({
							title: res.list.msg,
							icon: 'error'
						})
						return
					}
					if (that.type == 1) {
						var provider = 'wxpay';
					} else {
						var provider = 'alipay';
					}
					uni.requestPayment({
						provider: provider,
						orderInfo: res.list.data,
						success: function(res) {
							that.getCardData();
							that.$utils.redirectTo('/common/success', {
								title: "支付成功！",
								subTitle: "赶快体验会员特权吧！",
								btnValue: "返回首页",
								url: '/index/index'
							});
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				}).catch(err => {
					console.log("err: " + JSON.stringify(err));
				});
			},
			applePay(productId, ordersn) {
				var that = this;
		
				uni.requestPayment({
					provider: 'appleiap',
					orderInfo: {
						productid: productId
					},
					success: (e) => {
						uni.request({
							url: 'http://www.txzh.com.cn/api.php?app=Default&act=applepay',
							method: 'POST',
							data: {
								lx: 1,
								token: this.$store.state.app.token,
								productid: productId,
								str: JSON.stringify(e),
								ordersn: ordersn
							},
							header: {
								'Content-Type': 'application/x-www-form-urlencoded',
								'X-Requested-With': 'xmlhttprequest'
							},
							success: res => {
								uni.hideLoading()
								if (res.data.list.err == 1) {
									uni.showModal({
										content: res.data.list.msg,
										showCancel: false
									})
								} else {
									sendPayClue();
									that.getCardData();
									this.$utils.redirectTo('/common/success', {
										title: "订阅成功！",
										subTitle: "赶快体验会员特权吧！",
										btnValue: "返回首页",
										url: '/index/index'
									});
								}
							},
							fail: () => {},
							complete: () => {
								uni.hideLoading();
							}
						});



					},
					fail: (e) => {
						uni.hideLoading();
					},
					complete: () => {
						console.log("payment结束")
					}
				})
			},
			// filter-价格计算
			priceFilter(item) {
				let price = item.price,
					endPrice = (price / item.month).toFixed(1);
				if (price == endPrice) {
					return '限时特惠';
				} else {
					return '仅￥' + endPrice + '/月';
				};
			},
			on_priceList(index) {
				this.priceListIndex = index;
				this.pay_money = this.priceList[index]['price']
			},
			getprice(index) {
				this.vipIndex = index;
				getCardinfoData({
					id: index
				}).then(res => {
					this.vipDataList = res.list.vipDataList;
					this.priceList = res.list.priceList;
					this.pay_money = this.priceList[0]['price']
					this.priceListIndex = 0;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				});
				//获取钱包金额数据
				getWalletInfo({
					token: this.$store.state.app.token
				}).then(res => {
					this.maxMoney = res.money;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				});
			},
			on_tab_vip(index, name) {
				this.bannerIndex = index;
				this.vip_name = name;
				this.bannerChange(index);
				this.getprice(index);
			},
			//banner切换回调
			bannerChange(index) {
				getCardinfo({
					token: this.$store.state.app.token,
					index: this.bannerIndex
				}).then(res => {
					this.content = res.data.list.content

				}).catch(err => {

				});
				var list = [];
				if (index == 0) {

					this.vip_name_sub = '开启五大权限'
					for (var i = 0; i < this.vipInfoList.length; i++) {
						if (this.vipInfoList[i]['type'] == 1) {
							list.push(this.vipInfoList[i])
						}
					}

					this.vipInfoList_a = list;
				} else if (index == 1) {
					this.vip_name_sub = '八大权限 全新升级'
					for (var i = 0; i < this.vipInfoList.length; i++) {
						if (this.vipInfoList[i]['type'] == 2 || this.vipInfoList[i]['type'] == 1) {
							list.push(this.vipInfoList[i])
						}
					}

					this.vipInfoList_a = list;
				} else if (index == 2) {
					this.vip_name_sub = '升级解锁所有权限'

					this.vipInfoList_a = this.vipInfoList;
				}
			},
			//banner点击 
			bannerClick(index) {
				this.$utils.navigateTo('/vip/payment', {
					vipIndex: index
				});
			},
			//获取会员数据  
			getCardData() {
				getCardData({
					token: this.$store.state.app.token
				}).then(res => {
					if (res.list.err == 1) {
						this.$utils.redirectTo('/login/phone-login', {});
					} else {
						this.vipDataList = res.list.vipDataList;

						//this.vipInfoList = res.list.vipInfoList;
						this.userName = res.list.userName;
						this.vipType = res.list.vipType;
						this.userMobile = res.list.userMobile;
						this.src = res.list.img;
						this.content = res.list.content;
						if ((this.vipType == '' || this.vipType == '非会员') && res.list.expirationTime) {
							this.expirationTimeTxt = '- 会员已过期'
						} else if (res.list.expirationTime) {
							this.expirationTimeTxt = '- ' + res.list.expirationTime + '到期'
						}
						this.my_name = this.expirationTimeTxt


					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FEEFEF;
	}

	.vip-bg {
		width: 750rpx;
		height: 300px;
		background-image: url('../../static/vip/bg.png');
	}

	// .blue-main {
	// 	background: #09071f;
	// 	color: #fff;
	// 	padding: 80rpx 0 30rpx;
	// }

	// .header {
	// 	display: flex;
	// 	align-items: flex-start;
	// 	padding: 0 40rpx;
	// 	overflow: hidden;

	// 	.header-txt {
	// 		flex: 1;
	// 		margin-left: 25rpx;

	// 		.title {
	// 			font-size: 28rpx;
	// 			padding: 6rpx 0 10rpx;

	// 			text {
	// 				margin-left: 10rpx;
	// 				color: #98979c;
	// 				font-size: 22rpx;
	// 			}
	// 		}

	// 		.txt {
	// 			font-size: 24rpx;
	// 			color: #666;

	// 			.date {
	// 				display: inline-block;
	// 				margin-left: 12rpx;
	// 				vertical-align: middle;
	// 			}
	// 		}
	// 	}

	// 	.header-right {
	// 		margin-top: 6rpx;
	// 		padding: 0 17rpx;
	// 		line-height: 40rpx;
	// 		color: #fff;
	// 		font-size: 22rpx;
	// 		border-radius: 20rpx;
	// 		background: #d7934c;
	// 		cursor: pointer;
	// 	}
	// }

	// .tab-scroll {
	// 	margin-top: 30rpx;
	// 	padding: 25rpx 0;
	// 	border-top: 1px #333245 solid;
	// 	font-size: 30rpx;
	// 	color: #98979c;
	// 	overflow: hidden;
	// 	line-height: 55rpx;
	// 	text-align: center;

	// 	.tab-scroll-view {
	// 		padding: 0 20rpx;

	// 		.tab-list {
	// 			float: left;
	// 			width: 30%;
	// 			position: relative;

	// 			&.cur {
	// 				color: #dbbe9b;

	// 				&:after {
	// 					content: '';
	// 					display: block;
	// 					width: 55rpx;
	// 					height: 8rpx;
	// 					margin: 0 auto;
	// 					border-radius: 5rpx;
	// 					background: #dbbe9b;
	// 				}
	// 			}
	// 		}
	// 	}
	// }

	// .banner {
	// 	margin-top: 30rpx;
	// }

	// .vip-info {
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	padding: 10rpx 5% 45rpx;
	// 	text-align: center;
	// 	font-size: 24rpx;

	// 	.info-list {
	// 		width: 25%;
	// 		margin-top: 20rpx;
	// 		padding: 0 2.5%;

	// 		.txt {
	// 			margin-top: 10rpx;
	// 		}
	// 	}
	// }

	// .vip-detail {
	// 	margin-top: -20rpx;
	// 	border-radius: 20rpx;
	// 	padding: 40rpx 7%;
	// 	background: #fff;

	// 	.title {
	// 		font-size: 34rpx;
	// 		font-weight: bold;
	// 	}

	// 	.content {
	// 		margin-top: 18rpx;
	// 		line-height: 1.7em;
	// 	}
	// }
</style>